<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="客户昵称" prop="name">
          <el-input :disabled="pageType==1" v-model="form.name" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input :disabled="pageType==1" v-model="form.realname" />
        </el-form-item>
        <el-form-item label="公司">
          <el-input :disabled="pageType==1" v-model="form.company" />
        </el-form-item>
        <el-form-item label="职位">
          <el-input :disabled="pageType==1" v-model="form.title" />
        </el-form-item>
        <el-form-item label="客户手机" prop="phone">
          <el-input :disabled="pageType==1" v-model="form.phone" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select :disabled="pageType==1" v-model="form.type" placeholder="请选择类型">
            <el-option label="个人" value="个人" />
            <el-option label="企业" value="企业" />
          </el-select>
        </el-form-item>
        <el-form-item label="腾讯云ID">
          <el-input :disabled="pageType==1" v-model="form.TXID" />
        </el-form-item>
        <el-form-item label="微信">
          <el-input :disabled="pageType==1" v-model="form.wx" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input :disabled="pageType==1" v-model="form.email" />
        </el-form-item>
        <el-form-item label="客户来源" prop="source">
          <el-select :disabled="pageType==1" v-model="form.source" placeholder="请选择客户来源">
            <el-option label="腾讯云体验" value="腾讯云体验" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目">
          <el-select :disabled="pageType==1" v-model="form.project" placeholder="请选择客户来源">
            <el-option label="腾讯云体验" value="腾讯云体验" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input :disabled="pageType==1" v-model="form.remark" type="textarea" />
        </el-form-item>
        <div style="text-align:center">
          <el-button v-if="pageType==0" type="primary" @click="submitForm('form')">确定</el-button>
          <el-button v-if="pageType==1" type="primary" @click="pageType = 0">编辑</el-button>
          <el-button v-if="pageType==0" type="primary" @click="cancel">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      pageType: 0,
      form: {
        name: '',
        realname: '',
        company: '',
        title: '',
        phone: '',
        type: '',
        TXID: '',
        email: '',
        source: '',
        project: '',
        remark: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入客户昵称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择客户类型', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请选择客户来源', trigger: 'blur' }
        ]
      },
      permissions: [{
        name: '权限管理',
        subitems: [{
          name: '权限列表',
          checked: false
        }, {
          name: '权限添加',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }]
      }, {
        name: '商品管理',
        subitems: [{
          name: '商品列表',
          checked: false
        }, {
          name: '商品添加',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }]
      }, {
        name: '控制面板',
        subitems: [{
          name: '首页',
          checked: false
        }, {
          name: '打卡签到',
          checked: false
        }, {
          name: '业绩排行榜',
          checked: false
        }, {
          name: '平台运营数据',
          checked: false
        }]
      }, {
        name: '商品管理',
        subitems: [{
          name: '商品列表',
          checked: false
        }, {
          name: '商品添加',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }]
      }, {
        name: '控制面板',
        subitems: [{
          name: '首页',
          checked: false
        }, {
          name: '打卡签到',
          checked: false
        }, {
          name: '业绩排行榜',
          checked: false
        }, {
          name: '平台运营数据',
          checked: false
        }]
      }, {
        name: '商品管理',
        subitems: [{
          name: '商品列表',
          checked: false
        }, {
          name: '商品添加',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }, {
          name: '权限列表',
          checked: false
        }]
      }, {
        name: '控制面板',
        subitems: [{
          name: '首页',
          checked: false
        }, {
          name: '打卡签到',
          checked: false
        }, {
          name: '业绩排行榜',
          checked: false
        }, {
          name: '平台运营数据',
          checked: false
        }]
      }]
    }
  },
  watch: {
  },
  created() {
    this.title = this.$route.query.title
    if (this.title === '新增客户') {
      this.pageType = 0
    } else if (this.title === '客户详情') {
      this.pageType = 1
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  max-width: 1000px;
  margin: 0 auto;
  > div span {
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
  }
  .el-form {
    max-width: 900px;
    .title {
      font-weight: 600;
    }
    .remark {
      font-size: 13px;
      color: $textGray;
    }
    .el-button {
      @extend .bg-green;
      width: 20%;
      min-width: 160px;
    }
  }
}
.el-checkbox {
  margin-right: 30px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
  margin-right: 30px;
}
</style>
